<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ESP32</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .color-display {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<h1>选择颜色</h1>
<form id="colorForm" action="/setColor" method="GET">
    <label for="colorPicker">选择颜色: </label>
    <input type="color" id="colorPicker" name="color" value="#ff0000">
    <button type="submit">提交</button>
</form>
<div class="color-display" id="colorDisplay"></div>

<script>
    const colorPicker = document.getElementById('colorPicker');
    const colorDisplay = document.getElementById('colorDisplay');
    const colorForm = document.getElementById('colorForm');

    colorPicker.addEventListener('input', function () {
        colorDisplay.style.backgroundColor = colorPicker.value;
    });

    colorForm.addEventListener('submit', function (event) {
        const color = colorPicker.value;
        const rgb = hexToRgb(color);
        colorForm.action = `/setColor?r=${rgb.r}&g=${rgb.g}&b=${rgb.b}`;
    });

    function hexToRgb(hex) {
        let bigint = parseInt(hex.slice(1), 16);
        let r = (bigint >> 16) & 255;
        let g = (bigint >> 8) & 255;
        let b = bigint & 255;
        return {r, g, b};
    }
</script>
</body>
</html>